<template>
	<div>
		<a v-if="option.type=='picker'" class="weui-btn weui-btn_mini weui-btn_primary my-weui-btn" @click="showSelect"
		 :style="option.style">
			<slot>{{option.value}}</slot>
		</a>
		<a v-if="option.type=='date'" class="weui-btn weui-btn_mini weui-btn_primary my-weui-btn" @click="showDatePicker"
		 :style="option.style">
			<slot>{{option.value}}</slot>
		</a>
		<a v-if="option.type=='time'" class="weui-btn weui-btn_mini weui-btn_primary my-weui-btn" @click="showTimePicker"
		 :style="option.style">
			<slot>{{option.value}}</slot>
		</a>
	</div>
</template>

<script>
	export default {
		props: {
			option: {
				type: Object,
				default: () => {
					return {
						value: '按钮',
						type: 'picker',
						data: [],
						style: {},
					}
				}
			},
		},
		data() {
			return {
				select: '',
				defaultValue: [],
				list: []
			}
		},
		watch: {
			'option.defaultValue'(val) {
				this.defaultValue = val;
				this.$forceUpdate();
			},
			'option.data'(val) {
				this.list = val;
			}
		},
		methods: {
			showDatePicker() {
				var _this = this;
				var defaultValue;
				var start;
				var end;
				if (!!this.defaultValue) {
					defaultValue = this.defaultValue;
				} else {
					defaultValue = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()];
				}
				if (!!this.option.start) {
					start = this.option.start;
				} else {
					start = 1990;
				}
				if (!!this.option.end) {
					end = this.option.end;
				} else {
					end = new Date().getFullYear() + 10;
				}

				// 设置选择器id,否则默认日期不会生效
				let id = defaultValue.join('-');

				this.$weui.datePicker({
					start: start, // 从今天开始
					end: end,
					id: id,
					defaultValue: defaultValue,
					onChange: function(result) {},
					onConfirm: function(result) {
						_this.select = result;
						_this.$emit('on-change', result);
					},
				});
			},
			showSelect() {
				var _this = this;
				if (!!this.list && this.list.length != 0) {
					this.$weui.picker(_this.list, {
						className: 'custom-classname',
						container: 'body',
						defaultValue: [0],
						onChange: function(result) {},
						onConfirm: function(result) {
							_this.select = result;
							_this.$emit('on-change', result);
						},
					})
				}
			},
			showTimePicker() {
				let hour = [];
				let minute = [];
				let _this = this;

				for (let i = 0; i < 25; i++) {
					let label = i;
					if (i < 10) {
						label = '0' + i
					}
					let data = {
						label: label + '时',
						value: label
					}
					hour.push(data)
				}

				for (let i = 0; i < 61; i++) {
					let label = i;
					if (i < 10) {
						label = '0' + i
					}
					let data = {
						label: label + '分',
						value: label
					}
					minute.push(data)
				}
				this.$weui.picker(hour, minute, {
					defaultValue: ['0', '0'],
					onChange: function(result) {},
					onConfirm: function(result) {
						_this.select = result;
						_this.$emit('on-change', result);
					},
				});
			}
		},
		created() {
			this.list = this.option.data;
			this.defaultValue = this.option.defaultValue;
		}
	}
</script>

<style>
</style>
